<!DOCTYPE html>
<html>
<head>
	<title>PreloadJS: Multimedia Preload Example</title>
    <script type="text/javascript" src="/js/lib/jquery-1.8.0.js"></script>
    
	<script type="text/javascript" src="./assets/soundjs-NEXT.min.js"></script>

    <script type="text/javascript" src="/js/preloadjs/AbstractLoader.js"></script>
	<script type="text/javascript" src="/js/preloadjs/PreloadJS.js"></script>
	<script type="text/javascript" src="/js/preloadjs/TagLoader.js"></script>
	<script type="text/javascript" src="/js/preloadjs/XHRLoader.js"></script>


    <script type="text/javascript" src="./assets/mediaGrid.js"></script>
    
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	    http://code.createjs.com -->

	<link rel="stylesheet" type="text/css" href="./assets/demoStyles.css" />
	<style>
	   .gridBox {
			float: left;
			width: 150px;
			height: 123px;
			background-color: #363535;
			border-width: thin;
			color: #FFF0EE;
			margin: 1px;
		}
	   .gridBox:hover {  background-color: #111111; }

	   #imageGrid {
		   width: 960px;
	   }
		LABEL {
			position: relative;
			top: 10px; left: 10px;
			font-family: sans-serif; font-size: 12px;
		}
	</style>
</head>

<body onload="init()">

	<header id="header" class="PreloadJS">
		<h1><span class="text-product">Preload<strong>JS</strong></span> Example: Media Grid</h1>
		<p>PreloadJS can load a variety of media. In this example, click each example to load its related item. Once the item is loaded, it will display (image), play (sound), apply to the document (css), or display an alert (script).</p>
	</header>

	<div id="imageGrid">
		<div id="assets/BlueBird.png" onclick="loadAsset(this)" class="gridBox" style="width: 300px; height: 400px">
			<label>Image</label>
		</div>

		<div id="assets/bg.css" onclick="loadAsset(this)" class="gridBox">
			<label>CSS - Background</label>
		</div>

	   <div id="assets/alert1.js" onclick="loadAsset(this)" class="gridBox">
			<label>JavaScript</label>
		</div>

		<div id="assets/grant.xml" onclick="loadAsset(this)" class="gridBox">
			<label>XML</label>
		</div>

		<div id="assets/Texas.jpg" onclick="loadAsset(this)" class="gridBox" style="width:200px; height:248px; float: right;">
			<label>Image</label>
		</div>

		<div id="assets/tpl.html" onclick="loadAsset(this)" class="gridBox">
			<label>HTML</label>
		</div>

		<div id="assets/font.css" onclick="loadAsset(this)" class="gridBox">
			<label>CSS - Font Color</label>
		</div>

		<div id="assets/Thunder.mp3|assets/Thunder.ogg" onclick="loadAsset(this)" class="gridBox">
			<label>Audio</label>
		</div>

		<div id="assets/Autumn.png" onclick="loadAsset(this)" class="gridBox" style="width:454px; height:150px">
			<label>Image</label>
		</div>

		<div id="assets/NoFileHere.png" onclick="loadAsset(this)" class="gridBox" style="width:200px; height:150px;">
			<label>Intentionally missing file<br/>to generate error.</label>
		</div>

	</div>

</body>
</html>